


// 购物车系列
var xiaoyuand = document.querySelector(".cxdsp"); //小圆点(数量)
var gouwuc = document.querySelector(".cxdli3");   //购物车 (单独的点击块)

gouwuc.onmouseover=function(){  //悬浮的时候购物车样式
    xiaoyuand.style.backgroundColor = "#fff";
    xiaoyuand.style.color = "#f42424";
}
gouwuc.onmouseout=function(){  //离开的时候购物车样式
    xiaoyuand.style.backgroundColor = "#f42424";
    xiaoyuand.style.color = "#fff";
}

// 购物车展开问题
var gouwuczhans = document.querySelector(".gouwu_zhans");  //获取购物车展示区域(展示)
var cebiangouwc = document.querySelector(".publicAich");  //侧边购物车栏
var gouwucjiesu = document.querySelector(".gouwu_jiesuan"); //购物车展示区域的结算区
var gouwugouwuw = document.querySelector(".gouw"); //购物车(全部)

var idd = 0;  //点击次数
gouwuc.onclick=function(){
    idd++;
    if (idd%2==0) {
        cebiangouwc.style.right="0px";
        gouwugouwuw.style.right="-280px";
        gouwucjiesu.style.right="-280px";
    }else{
        cebiangouwc.style.right="280px";
        gouwugouwuw.style.right="0px";
        gouwucjiesu.style.right="0px";
    }
}

// 点击关闭购物车 - 关闭按钮
var guanbianniu = document.querySelector(".bi-x-circle"); //获取关闭购物车的按钮

guanbianniu.onclick=function(){
    cebiangouwc.style.right="0px";
    gouwugouwuw.style.right="-280px";
    gouwucjiesu.style.right="-280px";
}

// 放大镜
$(function() {
	let storage = window.localStorage;
	let dataArr = [allObj.pageHome,allObj.brandData,allObj.beatudyData,allObj.clothingData,allObj.presellData,allObj.jiaxDian];
	let id = storage.id;
	let i = storage.index;
	let datahtml = $('.data');
	let dataerji=$('.category-s')
	let dataht=$('.shang')
	let uler=$('.uler')
	let newArr = dataArr[i].filter(function(v,i){
		return v.id == id;
	})
	let bightml = '';
	let bigul = $('.animation03');
	newArr[0].data.imgs.forEach(function(v,i){
		console.log(v);
		bightml += `
	<li>
		<div class="small-img">
			<img src="${v}" />;
		</div>
	</li>
						
		`;
	})
	bigul.append(bightml);
	
	var arr='';
	newArr.forEach(function(v,i){
		arr+=`
		<div class="category-a">
			<div class="category-aa">
				<span>${v.data.classify}</span><i class="iconfont icon-xialajiantouxiao"></i>
				<div class="category-aaa">
					<ul>
						<li><a href="">女装</a></li>
						<li><a href="">男装</a></li>
						<li><a href="">内衣</a></li>
						<li><a href="">服饰配件</a></li>
						<li><a href="">户外运动</a></li>
					</ul>
				</div>
			</div>
		
		</div>
		<div class="rigicon"><i class="iconfont icon-xialajiantouxiao"></i> </div>
		<div class="category-b">
			<div class="category-bb">
				<span>${v.data.classify}</span><i class="iconfont icon-xialajiantouxiao"></i>
				<div class="category-bbb">
					<ul>
						<li><a href="">连衣裙</a></li>
						<li><a href="">蕾丝/雪纺衫</a></li>
						<li><a href="">T恤</a></li>
						<li><a href="">半身裙</a></li>
						<li><a href="">休闲裤</a></li>
						<li><a href="">短裤</a></li>
						<li><a href="">小西服</a></li>
						<li><a href="">风衣</a></li>
					</ul>
				</div>
			</div>
		
		</div>
		<div class="rigicon"> <i class="iconfont icon-xialajiantouxiao"></i></div>
		<div class="category-c">
			<div class="category-cc">
				<span>${v.data.classify}</span><i class="iconfont icon-xialajiantouxiao"></i>
			</div>
		</div>
		<div class="rigicon"> </div>
		<span class="jieshao">	${v.data.name}</span>
		
		`
	})
	dataerji.append(arr);
	
	
	var aee='';
	newArr.forEach(function(v,i){
		aee+=`
		<li><a href=""><img src="${v.data.imgs}" alt=""></a>
			<br><span>${v.data.name}</span>
			<br><span class="asp">￥${v.data.new}</span>
		</li>
		`
	})
	uler.append(aee);
	
	var att='';
	newArr.forEach(function(v,i){
		att+=`
		<div class="spimgtop">
								<span>商创自营</span>
								<i class="icons i-kefu"></i>
							</div>
							<div class="spimg">
								<img src="${v.data.src}" alt="">
							</div>
		`
	})
	dataht.append(att)
	
	var ar1='';
	newArr.forEach(function(v,i){
		ar1+=`
		
							<div class="name">
								${v.data.name}
							</div>
							<div class="summary">
								<div class="shangchang">
									<div class="shangchengwz">商城价</div>
									<strong class="shop-price">¥${v.data.new}</strong>
									<span class="price-notify">降价通知</span>
									<div class="pingjia">累计评价 <em>${parseInt(10*Math.random())}</em></div>
									<div class="xiaoliang">累计销量 <em>${v.data.num}</em></div>
								</div>
								<div class="VIP">
									<i class="icon icon-vip"></i>
									<p>高级VIP可享超值优惠价</p>
									<span class="spa">¥${v.data.new}</span>
									<span class="kaitong">立即开通>></span>
									<span class="sj">手机购买</span>
									<img src="img/Snipaste_2022-08-09_15-56-17.png" alt="">
								</div>
								<div class="shichang">
									<div class="shichang-v">市场价</div>
									<span>¥${v.data.old}</span>
								</div>
								<div class="lingquan">
									<span>领券</span>
									<div class="quan">
										<i class="i-left"></i>
										满10减1
										<i class="i-right"></i>
									</div>
									<div class="quan-2">
										<i class="i-left"></i>
										满100减1
										<i class="i-right"></i>
									</div>
								</div>
							</div>
							<div class="site">
								<span>配送</span>
								<span>&nbsp;&nbsp;&nbsp;&nbsp;上海市 至</span>
								<div class="dizhi">
									<a href="">河南省 </a><a href="">郑州市 </a><a href="">中原区 </a><a href="">桃贾路</a>
								</div>
								<span class="youhuo">有货</span>
								<span class="fahuo">下单后立即发货</span>
							</div>
							<div class="fuwu">
								服务
								<span><a href="">商创自营</a> 发货并提供售后服务。</span><span class="yunfei">[免运费]</span>
							</div>
							<div class="pinpai">品牌
								<span>喜瑞</span>
							</div>
							<div class="jifen">
								可用积分
								<span>0</span>
							</div>
							<div class="shuliang">
								数量
								<div class="amount-warp">
									<input type="text" class="text buy-num" ectype="quantity" value=" 1 " name="number">
									<div class="xiajiantou"><i class="iconfont icon-xialajiantouxiao"></i></div>
									<div class="shangjiantou"><i class="iconfont icon-xialajiantouxiao"></i></div>
									<span class="kucun">库存 32 件</span>
								</div>
		
							</div>
							<div class="tishi">
								温馨提示
								<a href=""><img
										src="https://x.dscmall.cn/storage/data/goods/services_label/%E6%AD%A3%E7%A1%AE2.png"
										alt="" height="15px" width="15px"> 支持七天无理由退货</a>
							</div>
							<div class="goumai">
								<button class="goumai-v">立即购买</button>
								<button class="gouwuche" data-id="${v.id}"><i class="iconfont icon-gouwuche"></i>加入购物车</button>
							</div>
		`
	})
	datahtml.append(ar1);
	
	
	
	//向购物车中天加数据
	let gouwuche = $('.gouwuche');
	gouwuche.click(function(){
		let id = $(this).attr('data-id');
		window.localStorage.setItem('sid'+id,id);
		console.log(window.localStorage);
	})
	
	
	$('.magnifier-container').attr('style','width:400px')
	var magnifierConfig = {
		magnifier : "#magnifier1",//最外层的大容器
		width : 400,//承载容器宽
		height : 400,//承载容器高
		moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例magnifier-container
		zoom : 2//缩放比例
	};

	var _magnifier = magnifier(magnifierConfig);

   
   //清空最近浏览
   $('.kong').click(function(){
   	$('.liulan').css('display','none')
   })
   
   
   //新品 热销 推荐切换
   $('.tab-san').children().click(function(){
	   $(this).addClass('san')
		$(this).siblings().removeClass('san')
   })
   
   
   // 商品详情 用户评论  网友讨论切换
   
   $('.tab-v').children().click(function(){
	     $(this).css('border-bottom','none')
		   $(this).css('color','red')
		   $(this).siblings().css('color','black')
	   $(this).css('border-top','2px solid red')
	    $(this).siblings().css('border-top','')
		
   })
   
   $('.taolun ul').children().click(function(){
	    $(this).css('color','red')
		 $(this).siblings().css('color','black')
   })
      let num = $('.shangjiantou').prev().prev().val()
   //商品数量按钮 ++  --
    var s =1;
   $('.shangjiantou').click(function(){
	s++;
	  var z= num*s
	  $('.shangjiantou').prev().prev().val(z)
	  if (z>32) {
	  	  $('.shangjiantou').prev().prev().val(32)
		  window.alert("库存不足")
	  }
   })
   $('.xiajiantou').click(function(){
	   s--;
	    var z= num*s
	    $('.shangjiantou').prev().prev().val(z)
		if (z<1) {
			 $('.shangjiantou').prev().prev().val(1) 
			 s=1;
			 window.alert("数量不能小于1")
			
			console.log(s)
		}
   })
   
   
   $('')
  $('.tab-v3').click(function(){
	  $('.xq').css('display','none')
	  $('.tttp').css('display','none')
	  $('.xianguan').css('margin-top','-54px')
	    $('.longimg').css('margin-top','25px')
		$('.tongleipinpai').css('margin-top','0px')
  })
  $('.tab-v1').click(function(){
	   $('.xianguan').css('margin-top','-2370px')
	   $('.longimg').css('margin-top','-1950px')
  	  $('.xq').css('display','block')
	  $('.tongleipinpai').css('margin-top','-2070px')
  	  $('.tttp').css('display','block')
	
  })
  
  
  
  
  //渲染
  
   
});
